<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
</head>
<body>
<script>
    let ws;
    if (window.WebSocket) {
        ws = new WebSocket("ws://192.168.50.142:12776/ws")
        ws.onmessage = function (arg) {
            let text = document.getElementById('responseText')
            text.value = text.value + "\n" + arg.data;
        }
        ws.onopen = function (ev) {
            document.getElementById('responseText').value = '连接成功'
        }
        ws.onclose = function () {
            let text = document.getElementById('responseText')
            text.value = text.value + "\n连接关闭";
        }
    } else {
        alert("当前浏览器不支持websocket")
    }

    //登录
    function login(msg) {
        if (!ws) {
            return;
        } else {
            if (ws.readyState == ws.OPEN) {
                //通过ws发送消息
                var msgBody = {
                    "userToken": msg,
                    "platform": "1"
                }
                sendMessage(msgBody)
            } else {
                alert('连接未开启')
            }
        }
    }

    //发送消息到服务器
    function sendMsg(msg) {
        if (!ws) {
            return;
        } else {
            if (ws.readyState == ws.OPEN) {
                //通过ws发送消息
                var msgBody = {"":}
                sendMessage(msgBody)
            } else {
                alert('连接未开启')
            }
        }
    }


    function sendMessage(body) {
        var msgObj = {"messageType": "1", "sequenceId": "123", "body": body}
        console.log(JSON.stringify(msgObj))
        ws.send(JSON.stringify(msgObj));
    }
</script>
<form onsubmit="return false">
    <div>
        <label>输入你的token </label>
        <input id="token" type="text" name="token">
        <input type="button" value="登录" onclick="login(this.form.token.value);">
    </div>
    <br><br>
    <textarea id="message" name="message" style="height: 300px;width: 300px"></textarea>
    <input type="button" value="发送消息" onclick="sendMsg(this.form.message.value);">
    <textarea id="responseText" name="responseText" style="height: 300px;width: 300px"></textarea>
    <input type="button" value="清空" onclick="document.getElementById('responseText').value=''">
</form>

</body>
</html>